<template>
	<div class="content">
		<Table stripe :columns="columns" :data="configList" ref="table"></Table>
		<Modal v-model="modal1" title="修改配置" width='40%'>
			<Form :label-width="100">
				<FormItem label="CODE">
					<Input class="w-50" v-model="edit.code" disabled="" />
				</FormItem>
				<!--<FormItem label="配置名称">
					<Input class="w-50" v-model="edit.desc" disabled="" />
				</FormItem>-->
				<!--<FormItem label="配置描述" v-if="edit.code != 'WEB_CONFIG_REGISTER_AGREEMENT'">
					<Input class="w-50" type="textarea" v-model="edit.desc" placeholder="请输入配置描述" />
				</FormItem>-->
				<FormItem label="配置描述">
					<Input class="w-50" v-model="edit.desc" placeholder="请输入配置描述" />
				</FormItem>
				<FormItem label="上传图片" v-show="edit.code == 'WEB_CONFIG_APP_BANNERS'">
					<Upload multiple type="drag" action="https://admin.aidtvip.com/upload/images" :headers='myHeaders' :on-success='handleSuccess' name="file" style="width: 50%;" ref="upload">
						<div style="padding: 20px 0">
							<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
							<p>上传图片</p>
						</div>
					</Upload>
				</FormItem>
				<FormItem label="配置值" v-if="edit.code != 'WEB_CONFIG_REGISTER_AGREEMENT'">
					<i-input class="w-50" type="textarea" placeholder="请输入配置值" v-model="edit.value"></i-input>
				</FormItem>
				<FormItem label="配置值" v-else>
					<quill-editor v-model="edit.value" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
					</quill-editor>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="modal1 = false;edit.desc = ''; edit.value = '';$refs.upload.clearFiles();">取消</Button>
				<Button type="primary" size="large" @click="editSubmit">确定</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				pageSize: 20,
				configList: [],
				modal1: false,
				token: localStorage.mytoken,
				myHeaders: {
					Authorization: 'bearer ' + localStorage.getItem('mytoken')
				},
				edit: {
					code: '',
					desc: '',
					title: '',
					value: '',
				},
				columns: [{
						title: 'id',
						key: 'id',
					},
					{
						title: '描述',
						key: 'desc',
					},
					{
						title: '值',
						key: 'value',
						render: (h, params) => {
							return h('div', {
								domProps: {
									innerHTML: params.row.value
								},
								style: {
									textOverflow: 'ellipsis',
									whiteSpace: 'nowrap',
									overflow: 'hidden'
								}
							})
						}
					},
					{

						title: '操作',
						key: 'action',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h(
									'Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.modal1 = true;
												let token = localStorage.token;
												this.axios.get('/admin/settings/web_configs/' + params.row.id, {
													headers: {
														Authorization: "bearer " + this.token
													}
												}).then(res => {
													if(res.data.code == 200) {
														this.edit = res.data.data;
													} else if(res.data.code == 500) {
														this.$Message.info(res.data.msg);
													} else if(res.data.code == 401) {
														this.$Message.info(res.data.msg);
														localStorage.removeItem("mytoken");
														this.$router.push({
															name: 'login'
														})
													}

												})
											}
										}
									},
									'编辑'
								),
							])
						}

					}
				]
			}
		},
		created() {

		},
		mounted() {
			this.$Message.config({
				top: 250
			});
			this.getConfig(); // 其他配置查询
		},
		methods: {
			getConfig() { // 其他配置查询
				this.axios.get('/admin/settings/web_configs?current=' + this.page + '&size=' + this.pageSize, {
					headers: {
						Authorization: "bearer " + this.token
					}
				}).then(res => {
					if(res.data.code == 200) {
						this.configList = res.data.data.records;
					} else if(res.data.code == 500) {
						this.$Message.info(res.data.msg);
					} else if(res.data.code == 401) {
						this.$Message.info(res.data.msg);
						localStorage.removeItem("mytoken");
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			editSubmit() {
				if(!this.edit.desc) {
					this.$Message.info('配置描述不能为空');
					return false;
				}
				if(!this.edit.value) {
					this.$Message.info('配置值不能为空');
					return false;
				}
				this.axios.put('/admin/settings/web_configs?id=' + this.edit.id + '&desc=' + this.edit.desc + '&value=' + this.edit.value, {}, {
					headers: {
						Authorization: "bearer " + this.token
					}
				}).then(res => {
					if(res.data.code == 200) {
						this.$Message.info(res.data.msg);
						this.modal1 = false;
						this.getConfig();
						this.edit = {
							code: '',
							desc: '',
							title: '',
							value: '',
						}
					} else if(res.data.code == 500) {
						this.$Message.info(res.data.msg);
					}
				}).catch(err => {
					this.$Message.info('系统错误');
				})
			},
			// 富文本编辑器
			onEditorBlur() {
				// 失去焦点事件
			},
			onEditorFocus() {
				// 获得焦点事件
			},
			onEditorChange() {
				// 内容改变事件
			},
			// 获取上传图片的地址
			handleSuccess(res, file) {
				this.$Message.info(res.msg);
				this.edit.value += res.data[0].url + ';'
			}
		}
	}
</script>

<style lang="less" scoped>
	.p-10 {
		padding-top: 0 !important;
		padding-left: 50px !important;
	}
	
	.w50 {
		width: 50px !important;
	}
	
	.w25 {
		width: 25px !important;
	}
	
	.w120 {
		width: 120px !important;
	}
	
	.mar {
		margin-left: 5px;
	}
	
	.pl-100 {
		padding-left: 100px;
	}
</style>